<template>
  <div class="free">
    <div class="content" v-for="(v1, i1) in data" :key="i1">
      <div v-if="v1.module === 10">
        <lunbo :pro="v1.banners"></lunbo>
      </div>
      <div>
        <van-cell v-if="v1.module == 45">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ v1.name }}</span>
          </template>
          <template #label>
            <div class="book-box">
              <div class="book-item" v-for="(v2, i2) in v1.list" :key="i2" @click="gotoBookLook(v2.id)">
                <img class="thumb4" :src="v2.cover" />
                <div class="book-name">{{ v2.title }}</div>
                <div class="book-scr">5阅点/千字</div>
                <div class="book-tip">{{ v2.discountDesc }}</div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>
      <div>
        <van-cell v-if="v1.module == 53">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ v1.name }}</span>
          </template>
          <template #label>
            <div v-for="(v3, i3) in v1.list" :key="i3">
              <div class="content-item" @click="gotoBookLook(v3.id)">
                <img class="thumb" :src="v3.cover" alt="" />
                <div class="label-right">
                  <span class="title">{{ v3.title }}</span>
                  
                  <p class="test-desc2">{{ v3.content }}</p>
                  <div class="author">
                    <span>{{ v3.author + "/" + v3.category }}</span>
                    <span class="tolook">立即阅读<van-icon name="arrow" /></span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>
      <div>
        <van-cell v-if="v1.module == 36">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ v1.name }}</span>
          </template>
          <template #label>
            <div v-for="(v3, i3) in v1.list" :key="i3">
              <div class="content-item" @click="gotoBookLook(v3.id)">
                <img class="thumb" :src="v3.cover" alt="" />
                <div class="label-right">
                  <span class="title">{{ v3.title }}</span>
                  <div class="author">
                    <span>{{ v3.author + "/" + v3.category }}</span>
                  </div>
                  <p class="test-desc2">{{ v3.content }}</p>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import lunbo from "../../components/lunbo.vue";
export default {
  name: "free",
  components: {
    lunbo,
  },
  data() {
    return {
      data: [],
      dataObj: {},
    };
  },
  created() {
    this.getBannerData();
  },
  methods: {
    getBannerData() {
      this.axios({
        method: "get",
        url: `/store/show.json?type=free&uuid=ea81f0be96a74d4fa7c674b9252a9ef4`,
      })
        .then((result) => {
          // console.log(result.data.data.list);
          this.data = result.data.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gotoBookLook(id) {
      // console.log(title);
      this.$router.push({name:"BookContent",params:{id:id}})
    }
  },
};
</script>

<style lang="less" scoped>
//36的公共样式
.van-cell {
  margin-bottom: 5px;
  border-bottom: 1px solid #f5f5f5;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 17px;
  color: #000;
}
.thumb {
  width: 80px;
  height: 100px;
  background-color: #f8f8f8;
}
.author{
  display: flex;
  justify-content: space-between;
}
.content-item {
  display: flex;
  margin-top: 7px;
  //书的描述信息(右边)
  .label-right {
    margin-left: 5px;
    .author {
      margin-top: 5px;
    }
    .title {
      font-size: 15px;
      color: #000;
    }
  }
}
/deep/.test-desc2 {
  width: 250px;
  height: 35px;
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
}

.book-box {
  display: flex;
}
.book-item {
  flex: 1;
}
/deep/.book-tip {
  color: #e4393c;
  font-size: 10px;
}
.book-scr {
  margin-top: 8px;
  text-decoration: line-through;
}
.book-name {
  color: #000;
  font-size: 14px;
}

.thumb4 {
  width: 100px;
  height: 120px;
  background-color: #f8f8f8;
}

.tolook{
  color: #000;
}


</style>